<template>
  <div class="warp">
    <div class="warp_auto">
      <div class="warp_top">
        <div class="jiansuo-box">
          <span class="label">交班人：</span>
          <el-select
            v-model="sendOperatorList"
            class="input"
            clearable
            filterable
            :filter-method="signFilter"
            placeholder="请选择"
          >
            <el-option
              v-for="item in signOptions"
              :key="item.id"
              :value="item.user_name"
              :label="item.user_name"
            />
          </el-select>
        </div>
        <div class="jiansuo-box">
          <span class="label">接班人：</span>
          <el-select
            v-model="receiveOperatorList"
            class="input"
            clearable
            filterable
            :filter-method="signFilter"
            placeholder="请选择"
          >
            <el-option
              v-for="item in signOptions"
              :key="item.id"
              :value="item.user_name"
              :label="item.user_name"
            />
          </el-select>
        </div>
        <div class="jiansuo-box">
          <span class="label">交班时间：</span>
          <el-date-picker
            v-model="dingdong"
            type="daterange"
            align="right"
            value-format="yyyy-MM-dd"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          />
        </div>
        <div class="jiansuo-box">
          <span class="label">接班时间：</span>
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            value-format="yyyy-MM-dd"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          />
        </div>
        <div class="jiansuo-box">
          <el-button type="primary" class="btn" icon="el-icon-search" @click="btn" :disabled=garbage>
            检索</el-button>
          <el-button type="primary" class="btn" icon="el-icon-plus" @click="openAddBtn" :disabled=garbage>
            新增</el-button>
          <el-button type="primary" class="btn" @click="draft_btn()" :disabled=garbage>草稿箱</el-button>
        </div>
      </div>

      <!-- 交班草稿箱 -->
      <el-dialog title="交班草稿箱" :visible.sync="draftShow">
        <el-table
          :data="dataListarr"
          stripe
          :header-cell-style="{ background: '#d2e0f9', color: '#606266' }"
        >
          <el-table-column
            prop="date"
            label="交班日期"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.info_date.substring(0, 19) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="班别"
            align="center"
          >
            <template slot-scope="scope">
              {{
                scope.row.shift === 0
                  ? "日班"
                  : scope.row.shift === 1
                  ? "晚班"
                  : "夜班"
              }}
            </template>
          </el-table-column>

          <el-table-column
            prop="address"
            label="交班人"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.send_operator }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="280"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="successiondraft(scope)"
                >确认交班</el-button
              >
              <el-button size="mini" @click="editdraft(scope)"
                >编辑</el-button
              >
              <el-popover
                :ref="`popover-${scope.$index}`"
                trigger="click"
                placement="top"
                width="100"
              >
                <p class="el-icon-warning">确定要删除该条交班草稿数据吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="noraft(scope)"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="yesdraft(scope)"
                    >确定</el-button
                  >
                </div>
                <el-button
                  slot="reference"
                  size="mini"
                  style="margin-left: 10px"
                  type="danger"
                  >删除</el-button
                >
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <!-- 录入交班信息 -->
      <el-dialog
        title="录入交班信息"
        :visible.sync="dialogVisible"
        class="mod_box1"
      >
        <el-button
          type="primary"
          size="small"
          style="float: right; margin-right: 24px; margin-top: 12px"
          @click="generation"
          >一键生成交班报告</el-button
        >
        <span style="float: right; margin-right: 24px; margin-top: 12px">
          设置页码：
          <input
            v-model="pageNum"
            autocomplete="off"
            spellcheck="false"
            type="text"
            placeholder=""
            oninput="value=value.replace(/[^0-9.]/g,'')"
            style="width: 100px; height: 30px"
          />
        </span>

        <div id="print-handOver-div" style="margin: 0 auto">
          <div
            style="
              text-align: center;
              font-size: 24px;
              font-weight: bold;
              margin-bottom: 8px;
              margin-top: 8px;
            "
          >
            <img
              src="@/icons/img/changzhi.png"
              style="width: 30px; height: 30px"
            />{{ this.$store.state.City }}医院<br />床旁护理交班
          </div>
          <div class="second">
            <!--
            <span style="padding-right: 5px"
              >时间跨度 <span style="color: red">(必填)</span>:</span
            >
            <el-date-picker
              v-model="value3"
              style="width: 310px; margin-right: 5px"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
            -->
            <span style="padding-right: 5px"
              >交班时间<span style="color: red">(必填)</span>:</span
            >
            <el-date-picker
              v-model="info.infoDate"
              type="date"
              style="width: 100px; margin-right: 15px"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <span style="padding-right: 5px"
              >班别<span style="color: red">(必填)</span>:</span
            >
            <el-select
              v-model="info.shift"
              style="width: 75px; margin-right: 15px"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in dataArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <span style="padding-right: 5px"
              >接班时间<span style="color: red">(必填)</span>:</span
            >
            <el-time-picker
              v-model="info.startHourTime"
              style="width: 100px; margin-right: 15px"
              format="HH:mm"
              value-format="HH:mm"
            >
            </el-time-picker
            >--
            <el-time-picker
              v-model="info.endHourTime"
              style="width: 100px; margin-right: 15px"
              format="HH:mm"
              value-format="HH:mm"
            >
            </el-time-picker>
            <!--
            <span style="padding-right: 5px"
              >当班时间<span style="color: red">(必填)</span>:</span
            >
            <input
              v-model="info.handoverHour"
              autocomplete="off"
              spellcheck="false"
              type="text"
              class="tiwen"
              style="width: 80px; margin-right: 20px"
            />小时
            -->

            <!--
            <span style="padding-right: 5px">生命体征极值时间跨度:</span>
            <el-date-picker
              v-model="value4"
              style="width: 310px"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
            -->
          </div>
          <div class="three">
            <el-row>
              <el-col :span="24">
                <div
                  class="grid-content bg-purple-dark"
                  style="font-weight: 700"
                >
                  一、患者基本信息
                </div>
              </el-col>
            </el-row>
            <div class="three_one">
              <span>床号：</span>
              <span
                style="
                    display: inline-block;
                    width: 80px;
                    text-align: center;
                    border-bottom: 1px solid rgb(220, 222, 226);
                    margin-right: 5px;
                  "
              >{{ info.bedName }}</span>
              <span>姓名：</span>
              <span
                style="
                    display: inline-block;
                    width: 80px;
                    text-align: center;
                    border-bottom: 1px solid rgb(220, 222, 226);
                    margin-right: 5px;
                  "
              >{{ info.name }}</span>
              <span>性别：</span>
              <span
                style="
                    display: inline-block;
                    width: 80px;
                    text-align: center;
                    border-bottom: 1px solid rgb(220, 222, 226);
                    margin-right: 5px;
                  "
              >{{ info.sex }}</span>
              <span>年龄：</span>
              <span
                style="
                    display: inline-block;
                    width: 80px;
                    text-align: center;
                    border-bottom: 1px solid rgb(220, 222, 226);
                    margin-right: 5px;
                  "
              >{{ this.$store.state.user.severFall.ageOrMonthAge}}</span>
              <span>住院号：</span>
              <span
                style="
                    display: inline-block;
                    width: 120px;
                    text-align: center;
                    border-bottom: 1px solid rgb(220, 222, 226);
                    margin-right: 5px;
                  "
              >{{ this.$store.state.user.severFall.visit_id }}</span>
              <span>来源科室：</span>
              <input
                v-model="info.department"
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="tiwen"
                style="width: 120px; margin-right: 20px"
              />
              <span>入科时间：</span>
              <input
                v-model="info.visitTime"
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="tiwen"
                style="width: 160px; margin-right: 20px"
              />
              <span>出科时间：</span>
              <input
                v-model="info.operationTime"
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="tiwen"
                style="width: 160px; margin-right: 20px; margin-top: 8px"
              />
              <span>过敏史：</span>
              <input
                v-model="info.allergies"
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="tiwen"
                style="width: 160px; margin-right: 20px"
              />
              <span>诊断：</span>
              <span
                style="
                    display: inline-block;
                    width: 160px;
                    border-bottom: 1px solid rgb(220, 222, 226);
                    margin-right: 20px;
                  "
              >{{ this.data.diagnosis_name}}</span>
            </div>
          </div>
          <div class="three" style="padding-top: 10px">
            <el-row>
              <el-col :span="24"
                ><div
                  class="grid-content bg-purple-dark"
                  style="font-weight: 700"
                >
                  二、生命体征
                </div>
              </el-col>
            </el-row>
            <div class="three_one">
              <span> 生命体征时间： </span>
              <el-date-picker
                v-model="info.vitalSignTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm"
                style="width: 150px"
              />
            </div>
            <div style="padding-top: 10px">
              <span style="padding-right: 5px">
                当前体征:体温
                <input
                  v-model="info.temperature"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />℃
              </span>
              <span style="padding-right: 5px">
                脉搏
                <input
                  v-model="info.pulse"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />次/分
              </span>
              <span style="padding-right: 5px">
                心率
                <input
                  v-model="info.hr"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />次/分
              </span>
              <span style="padding-right: 5px">
                呼吸
                <input
                  v-model="info.br"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />次/分
              </span>
              <span style="padding-right: 5px">
                SpO₂
                <input
                  v-model="info.spo2"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />%
              </span>
              <span style="padding-right: 5px">
                有创血压
                <input
                  v-model="info.ibp"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />mmHg
              </span>
              <span style="padding-right: 5px">
                无创血压
                <input
                  v-model="info.bp"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />mmHg
              </span>
              <span style="padding-right: 5px">
                CVP
                <input
                  v-model="info.cvp"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />cmH2o
              </span>
              <span style="padding-right: 5px">
                CVP
                <input
                  v-model="info.cvpmmHg"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />mmHg
              </span>
            </div>
            <div style="padding-top: 10px">
              <span style="padding-right: 5px">
                最大体征:体温
                <input
                  v-model="info.maxtemperature"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />℃
              </span>
              <span style="padding-right: 5px">
                脉搏
                <input
                  v-model="info.maxpulse"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />次/分
              </span>
              <span style="padding-right: 5px">
                心率
                <input
                  v-model="info.maxhr"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />次/分
              </span>
              <span style="padding-right: 5px">
                呼吸
                <input
                  v-model="info.maxbr"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />次/分
              </span>
              <span style="padding-right: 5px">
                SpO₂
                <input
                  v-model="info.maxspo2"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />%
              </span>
              <span style="padding-right: 5px">
                有创血压
                <input
                  v-model="info.maxibp"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />mmHg
              </span>
              <span style="padding-right: 5px">
                无创血压
                <input
                  v-model="info.maxbp"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />mmHg
              </span>
              <span style="padding-right: 5px">
                CVP
                <input
                  v-model="info.maxcvp"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />cmH2o
              </span>
              <span style="padding-right: 5px">
                CVP
                <input
                  v-model="info.maxcvpmmHg"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />mmHg
              </span>
            </div>
            <div style="padding-top: 10px">
              <span style="padding-right: 5px">
                最小体征:体温
                <input
                  v-model="info.mintemperature"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />℃
              </span>
              <span style="padding-right: 5px">
                脉搏
                <input
                  v-model="info.minpulse"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />次/分
              </span>
              <span style="padding-right: 5px">
                心率
                <input
                  v-model="info.minhr"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />次/分
              </span>
              <span style="padding-right: 5px">
                呼吸
                <input
                  v-model="info.minbr"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />次/分
              </span>
              <span style="padding-right: 5px">
                SpO₂
                <input
                  v-model="info.minspo2"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />%
              </span>
              <span style="padding-right: 5px">
                有创血压
                <input
                  v-model="info.minibp"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />mmHg
              </span>
              <span style="padding-right: 5px">
                无创血压
                <input
                  v-model="info.minbp"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />mmHg
              </span>
              <span style="padding-right: 5px">
                CVP
                <input
                  v-model="info.mincvp"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />cmH2o
              </span>
              <span style="padding-right: 5px">
                CVP
                <input
                  v-model="info.mincvpmmHg"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />mmHg
              </span>
            </div>
          </div>
          <div class="three" style="padding-top: 10px">
            <el-row>
              <el-col :span="24"
                ><div
                  class="grid-content bg-purple-dark"
                  style="font-weight: 700"
                >
                  三、出入量
                </div></el-col
              >
            </el-row>
            <div class="three_one">
              <div>
                <span>入量：</span>
                <input
                  v-model="info.intake"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />ml
              </div>
              <div style="padding-top: 10px">
                <span>出量：</span>
                <input
                  v-model="info.output"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />ml
              </div>
            </div>
          </div>
          <div class="three" style="padding-top: 10px">
            <el-row>
              <el-col :span="24"
                ><div
                  class="grid-content bg-purple-dark"
                  style="font-weight: 700"
                >
                  四、呼吸辅助方式
                </div></el-col
              >
            </el-row>
            <div class="three_one">
              <div>
                <span>人工气道方式：</span>
                <el-checkbox
                  v-model="info.tracheaInsert"
                  label="气管插管"
                  true-label="1"
                  false-label="0"
                />
                <el-checkbox
                  v-model="info.tracheaCut"
                  label="气管切开"
                  true-label="1"
                  false-label="0"
                />
              </div>
              <div style="padding-top: 10px">
                <span style="padding-right: 5px">
                  呼吸机型号:
                  <input
                    v-model="info.ventilatorModel"
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    placeholder=""
                    class="tiwen"
                    style="width: 40px"
                  />
                </span>
                <span style="padding-right: 5px">
                  模式:
                  <input
                    v-model="info.breathePattern"
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    placeholder=""
                    class="tiwen"
                    style="width: 40px"
                  />
                </span>
                <span style="padding-right: 5px">
                  插管深度:
                  <input
                    v-model="info.tubeDepth"
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    placeholder=""
                    class="tiwen"
                    style="width: 40px"
                  />cm
                </span>
                <span style="padding-right: 5px">
                  吸氧方式:
                  <input
                    v-model="info.oxygenMethod"
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    placeholder=""
                    class="tiwen"
                    style="width: 40px"
                  />
                </span>
                <span style="padding-right: 5px">
                  流量:
                  <input
                    v-model="info.oxygenFlow"
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    placeholder=""
                    class="tiwen"
                    style="width: 40px"
                  />
                </span>
              </div>
            </div>
          </div>
          <div class="three" style="padding-top: 10px">
            <el-row>
              <el-col :span="24"
                ><div
                  class="grid-content bg-purple-dark"
                  style="font-weight: 700"
                >
                  五、留置管路
                </div></el-col
              >
            </el-row>
            <div class="three_one">
              <div>
                <span>静脉置管</span>
              </div>
              <div style="padding-top: 10px">
                <el-checkbox
                  label="CVC"
                  v-model="info.cvcSelect"
                  true-label="1"
                  false-label="0"
                />
                <input
                  v-model="info.cvcDescription"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 700px"
                />
              </div>
              <div style="padding-top: 10px">
                <el-checkbox
                  label="PVC"
                  v-model="info.pvcSelect"
                  true-label="1"
                  false-label="0"
                />
                <input
                  v-model="info.pvcDescription"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 700px"
                />
              </div>
              <div style="padding-top: 10px">
                <el-checkbox
                  label="PICC"
                  v-model="info.piccSelect"
                  true-label="1"
                  false-label="0"
                />
                <input
                  v-model="info.piccDescription"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 700px"
                />
              </div>
              <div style="padding-top: 10px">
                <el-checkbox
                  label="PORT"
                  v-model="info.portSelect"
                  true-label="1"
                  false-label="0"
                />
                <input
                  v-model="info.portDescription"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 700px"
                />
              </div>
              <div style="padding-top: 10px">
                <el-checkbox
                  label="留置针"
                  v-model="info.leftNeedleSelect"
                  true-label="1"
                  false-label="0"
                />
                <input
                  v-model="info.leftNeedleDescription"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 700px"
                />
              </div>
              <div style="padding-top: 10px">
                <el-checkbox
                  v-model="info.arterySelect"
                  label="动脉置管"
                  true-label="1"
                  false-label="0"
                />
                <input
                  v-model="info.artery"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 700px"
                />
              </div>
              <div style="padding-top: 10px">
                <span> 交班人： </span>
                <input
                  v-model="info.sendOperator"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 120px"
                />
                <span style="margin-left: 15px"> 交班备注： </span>
                <input
                  v-model="info.sendDescription"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 120px"
                />
              </div>
            </div>
            <div style="text-align: center; margin-top: 1px">
              第{{ this.pageNum }}页
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="draftBtn()">存为草稿</el-button>
          <span v-if="this.draftids === ''">
            <el-button
              type="primary"
              style="margin-left: 10px"
              @click="subBtn()"
              >保存</el-button
            >
          </span>
          <span v-else-if="this.draftids !== ''">
            <el-button
              type="primary"
              style="margin-left: 10px"
              @click="subBtns(), (dialogVisible = false)"
              >保存</el-button
            >
          </span>
        </span>
      </el-dialog>

      <!-- 页面表格 -->
      <el-card>
        <el-table
          :data="dataList"
          stripe
          style="width: 100%"
          :header-cell-style="{ background: '#d2e0f9', color: '#606266' }"
        >
          <el-table-column label="id" align="center" prop="id" v-if="false" />
          <el-table-column
            prop="date"
            label="交班时间"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.info_date.substring(0, 19) }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="班别" width="100" align="center">
            <template slot-scope="scope">
              {{
                scope.row.shift === 0
                  ? "日班"
                  : scope.row.shift === 1
                    ? "晚班"
                    : "夜班"
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="接班时间"
            align="center"
          >
            <template
              slot-scope="scope"
              v-if="scope.row.status !== 0 && scope.row.status !== 1"
            >
              {{ scope.row.handover_time.substring(0, 19) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="交班人"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.send_operator }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="接班人"
            align="center"
          >
            <template
              slot-scope="scope"
              v-if="scope.row.status !== 0 && scope.row.status !== 1"
            >
              {{ scope.row.receive_operator }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="交接状态"
            align="center"
          >
            <template slot-scope="scope">
              {{
                scope.row.status === 0
                  ? "草稿箱"
                  : scope.row.status === 1
                    ? "已交班"
                    : scope.row.status === 2
                      ? "已接班"
                      : "删除"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="(isShow = true), succession(scope)"
              >确认接班</el-button
              >
              <el-popover
                :ref="`popover-${scope.$index}`"
                trigger="click"
                placement="top"
                width="100"
              >
                <p class="el-icon-warning">
                  确认将该条交班数据状态回退为草稿吗？
                </p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="no(scope)"
                  >取消</el-button
                  >
                  <el-button type="primary" size="mini" @click="yes(scope)"
                  >确定</el-button
                  >
                </div>
                <el-button
                  slot="reference"
                  size="mini"
                  style="margin-left: 10px"
                  type="danger"
                >回退</el-button
                >
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 确认接班 -->
      <el-dialog title="确认接班" :visible.sync="isShow" class="mod_box1">
        <el-button
          type="primary"
          size="small"
          style="float: right; margin-right: 24px; margin-top: 12px"
          @click="generationDuring"
          >一键生成接班报告</el-button
        >
        <span style="float: right; margin-right: 24px; margin-top: 12px">
          设置页码：
          <input
            v-model="pageNums"
            autocomplete="off"
            spellcheck="false"
            type="text"
            placeholder=""
            oninput="value=value.replace(/[^0-9.]/g,'')"
            style="width: 100px; height: 30px"
          />
        </span>
        <div id="print-during-div" class="cent" style="background: #efefef4d">
          <div
            style="
              text-align: center;
              font-size: 24px;
              font-weight: bold;
              margin-bottom: 8px;
              margin-top: 8px;
            "
          >
            床旁护理接班表
          </div>
          <div class="second">
            <!--
            <span style="padding-right: 5px">时间跨度:</span>
            <el-date-picker
              v-model="value5"
              disabled
              style="width: 320px"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
            -->
            <span style="padding-right: 5px"
              >日期<span style="color: red">(必填)</span>:</span
            >
            <el-date-picker
              v-model="info.infoDate"
              type="date"
              style="width: 100px; margin-right: 15px"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <span style="padding-right: 5px"
              >班别<span style="color: red">(必填)</span>:</span
            >
            <el-select
              v-model="info.shift"
              style="width: 75px; margin-right: 15px"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in dataArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <span style="padding-right: 5px"
              >当班时间<span style="color: red">(必填)</span>:</span
            >

            <el-time-picker
              v-model="info.startHourTime"
              style="width: 100px; margin-right: 15px"
              format="HH:mm"
              value-format="HH:mm"
            >
            </el-time-picker
            >--
            <el-time-picker
              v-model="info.endHourTime"
              style="width: 100px; margin-right: 15px"
              format="HH:mm"
              value-format="HH:mm"
            >
            </el-time-picker>
            <!--
            <span style="padding-right: 5px">生命体征极值时间跨度:</span>
            <el-date-picker
              v-model="value6"
              disabled
              style="width: 320px"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
            -->
          </div>
          <div class="three">
            <el-row>
              <el-col :span="24"
                ><div
                  class="grid-content bg-purple-dark"
                  style="font-weight: 700"
                >
                  一、患者基本信息
                </div></el-col
              >
            </el-row>
            <div class="three_one">
              <span>床号：</span>
              <span
                style="
                    display: inline-block;
                    width: 80px;
                    text-align: center;
                    border-bottom: 1px solid rgb(220, 222, 226);
                    margin-right: 5px;
                  "
              >{{ info.bedName }}</span>
              <span>姓名：</span>
              <span
                style="
                    display: inline-block;
                    width: 80px;
                    text-align: center;
                    border-bottom: 1px solid rgb(220, 222, 226);
                    margin-right: 5px;
                  "
              >{{ info.name }}</span>
              <span>性别：</span>
              <span
                style="
                    display: inline-block;
                    width: 80px;
                    text-align: center;
                    border-bottom: 1px solid rgb(220, 222, 226);
                    margin-right: 5px;
                  "
              >{{ info.sex }}</span>
              <span>年龄：</span>
              <span
                style="
                    display: inline-block;
                    width: 80px;
                    text-align: center;
                    border-bottom: 1px solid rgb(220, 222, 226);
                    margin-right: 5px;
                  "
              >{{ this.$store.state.user.severFall.ageOrMonthAge}}</span>
              <span>住院号：</span>
              <span
                style="
                    display: inline-block;
                    width: 120px;
                    text-align: center;
                    border-bottom: 1px solid rgb(220, 222, 226);
                    margin-right: 5px;
                  "
              >{{ this.$store.state.user.severFall.visit_id }}</span>
              <span>来源科室：</span>
              <input
                v-model="info.department"
                disabled
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="tiwen"
                style="width: 120px; margin-right: 20px"
              />
              <span>入科时间：</span>
              <input
                v-model="info.visitTime"
                disabled
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="tiwen"
                style="width: 170px; margin-right: 20px"
              />
              <span>出科时间：</span>
              <input
                v-model="info.operationTime"
                disabled
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="tiwen"
                style="width: 160px; margin-right: 20px; margin-top: 10px"
              />
              <span>过敏史：</span>
              <input
                v-model="info.allergies"
                disabled
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="tiwen"
                style="width: 160px; margin-right: 20px"
              />
              <span>诊断：</span>
              <span
                style="
                    display: inline-block;
                    width: 160px;
                    border-bottom: 1px solid rgb(220, 222, 226);
                    margin-right: 20px;
                  "
              >{{ this.data.diagnosis_name }}</span>
            </div>
          </div>
          <div class="three" style="padding-top: 10px">
            <el-row>
              <el-col :span="24"
                ><div
                  class="grid-content bg-purple-dark"
                  style="font-weight: 700"
                >
                  二、生命体征
                </div></el-col
              >
            </el-row>
            <div class="three_one">
              <span> 生命体征时间: </span>
              <el-date-picker
                v-model="info.vitalSignTime"
                disabled
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm"
                style="width: 150px"
              />
            </div>
            <div style="padding-top: 10px">
              <span style="padding-right: 5px">
                当前体征:体温
                <input
                  v-model="info.temperature"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />℃
              </span>
              <span style="padding-right: 5px">
                脉搏
                <input
                  v-model="info.pulse"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />次/分
              </span>
              <span style="padding-right: 5px">
                心率
                <input
                  v-model="info.hr"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />次/分
              </span>
              <span style="padding-right: 5px">
                呼吸
                <input
                  v-model="info.br"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />次/分
              </span>
              <span style="padding-right: 5px">
                SpO₂
                <input
                  v-model="info.spo2"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />%
              </span>
              <span style="padding-right: 5px">
                有创血压
                <input
                  v-model="info.ibp"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />mmHg
              </span>
              <span style="padding-right: 5px">
                无创血压
                <input
                  v-model="info.bp"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />mmHg
              </span>
              <span style="padding-right: 5px">
                CVP
                <input
                  v-model="info.cvp"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />cmH2o
              </span>
              <span style="padding-right: 5px">
                CVP
                <input
                  v-model="info.cvpmmHg"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />mmHg
              </span>
            </div>
            <div style="padding-top: 10px">
              <span style="padding-right: 5px">
                最大体征:体温
                <input
                  v-model="info.maxtemperature"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />℃
              </span>
              <span style="padding-right: 5px">
                脉搏
                <input
                  v-model="info.maxpulse"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />次/分
              </span>
              <span style="padding-right: 5px">
                心率
                <input
                  v-model="info.maxhr"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />次/分
              </span>
              <span style="padding-right: 5px">
                呼吸
                <input
                  v-model="info.maxbr"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />次/分
              </span>
              <span style="padding-right: 5px">
                SpO₂
                <input
                  v-model="info.maxspo2"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />%
              </span>
              <span style="padding-right: 5px">
                有创血压
                <input
                  v-model="info.maxibp"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />mmHg
              </span>
              <span style="padding-right: 5px">
                无创血压
                <input
                  v-model="info.maxbp"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />mmHg
              </span>
              <span style="padding-right: 5px">
                CVP
                <input
                  v-model="info.maxcvp"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />cmH2o
              </span>
              <span style="padding-right: 5px">
                CVP
                <input
                  v-model="info.maxcvpmmHg"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />mmHg
              </span>
            </div>
            <div style="padding-top: 10px">
              <span style="padding-right: 5px">
                最小体征:体温
                <input
                  v-model="info.mintemperature"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />℃
              </span>
              <span style="padding-right: 5px">
                脉搏
                <input
                  v-model="info.minpulse"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />次/分
              </span>
              <span style="padding-right: 5px">
                心率
                <input
                  v-model="info.minhr"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />次/分
              </span>
              <span style="padding-right: 5px">
                呼吸
                <input
                  v-model="info.minbr"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />次/分
              </span>
              <span style="padding-right: 5px">
                SpO₂
                <input
                  v-model="info.minspo2"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />%
              </span>
              <span style="padding-right: 5px">
                有创血压
                <input
                  v-model="info.minibp"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />mmHg
              </span>
              <span style="padding-right: 5px">
                无创血压
                <input
                  v-model="info.minbp"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />mmHg
              </span>
              <span style="padding-right: 5px">
                CVP
                <input
                  v-model="info.mincvp"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />cmH2o
              </span>
              <span style="padding-right: 5px">
                CVP
                <input
                  v-model="info.mincvpmmHg"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 60px"
                />mmHg
              </span>
            </div>
          </div>
          <div class="three" style="padding-top: 10px">
            <el-row>
              <el-col :span="24"
                ><div
                  class="grid-content bg-purple-dark"
                  style="font-weight: 700"
                >
                  三、出入量
                </div></el-col
              >
            </el-row>
            <div class="three_one">
              <div>
                <span>入量</span>
                <input
                  v-model="info.intake"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />ml
              </div>
              <div style="padding-top: 10px">
                <span>出量</span>
                <input
                  v-model="info.output"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 40px"
                />ml
              </div>
            </div>
          </div>
          <div class="three" style="padding-top: 10px">
            <el-row>
              <el-col :span="24"
                ><div
                  class="grid-content bg-purple-dark"
                  style="font-weight: 700"
                >
                  四、呼吸辅助方式
                </div></el-col
              >
            </el-row>
            <div class="three_one">
              <div>
                <span>人工气道方式：</span>
                <el-checkbox
                  v-model="info.tracheaInsert"
                  disabled
                  label="气管插管"
                  true-label="1"
                  false-label="0"
                />
                <el-checkbox
                  v-model="info.tracheaCut"
                  disabled
                  label="气管切开"
                  true-label="1"
                  false-label="0"
                />
              </div>
              <div style="padding-top: 10px">
                <span style="padding-right: 5px">
                  呼吸机型号:
                  <input
                    v-model="info.ventilatorModel"
                    disabled
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    placeholder=""
                    class="tiwen"
                    style="width: 40px"
                  />
                </span>
                <span style="padding-right: 5px">
                  模式:
                  <input
                    v-model="info.breathePattern"
                    disabled
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    placeholder=""
                    class="tiwen"
                    style="width: 40px"
                  />
                </span>
                <span style="padding-right: 5px">
                  插管深度:
                  <input
                    v-model="info.tubeDepth"
                    disabled
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    placeholder=""
                    class="tiwen"
                    style="width: 40px"
                  />cm
                </span>
                <span style="padding-right: 5px">
                  吸氧方式:
                  <input
                    v-model="info.oxygenMethod"
                    disabled
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    placeholder=""
                    class="tiwen"
                    style="width: 40px"
                  />
                </span>
                <span style="padding-right: 5px">
                  流量:
                  <input
                    v-model="info.oxygenFlow"
                    disabled
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    placeholder=""
                    class="tiwen"
                    style="width: 40px"
                  />
                </span>
              </div>
            </div>
          </div>
          <div class="three" style="padding-top: 10px">
            <el-row>
              <el-col :span="24"
                ><div
                  class="grid-content bg-purple-dark"
                  style="font-weight: 700"
                >
                  五、留置管路
                </div></el-col
              >
            </el-row>
            <div class="three_one">
              <div>
                <span>静脉置管</span>
              </div>
              <div style="padding-top: 10px">
                <el-checkbox
                  label="CVC"
                  disabled
                  v-model="info.cvcSelect"
                  true-label="1"
                  false-label="0"
                />
                <input
                  v-model="info.cvcDescription"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 700px"
                />
              </div>
              <div style="padding-top: 10px">
                <el-checkbox
                  label="PVC"
                  disabled
                  v-model="info.pvcSelect"
                  true-label="1"
                  false-label="0"
                />
                <input
                  v-model="info.pvcDescription"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 700px"
                />
              </div>
              <div style="padding-top: 10px">
                <el-checkbox
                  label="PICC"
                  disabled
                  v-model="info.piccSelect"
                  true-label="1"
                  false-label="0"
                />
                <input
                  v-model="info.piccDescription"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 700px"
                />
              </div>
              <div style="padding-top: 10px">
                <el-checkbox
                  label="PORT"
                  disabled
                  v-model="info.portSelect"
                  true-label="1"
                  false-label="0"
                />
                <input
                  v-model="info.portDescription"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 700px"
                />
              </div>
              <div style="padding-top: 10px">
                <el-checkbox
                  label="留置针"
                  disabled
                  v-model="info.leftNeedleSelect"
                  true-label="1"
                  false-label="0"
                />
                <input
                  v-model="info.leftNeedleDescription"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 700px"
                />
              </div>
              <div style="padding-top: 10px">
                <el-checkbox
                  v-model="info.arterySelect"
                  disabled
                  label="动脉置管"
                  true-label="1"
                  false-label="0"
                />
                <input
                  v-model="info.artery"
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 700px"
                />
              </div>
              <div style="padding-top: 10px">
                <span> 交班人: </span>
                <input
                  v-model="info.sendOperator"
                  clearable
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 120px"
                />
                <span style="margin-left: 10px"> 交班备注: </span>
                <input
                  v-model="info.sendDescription"
                  disabled
                  autocomplete="off"
                  spellcheck="false"
                  type="text"
                  placeholder=""
                  class="tiwen"
                  style="width: 120px"
                />
              </div>
            </div>
          </div>
          <div class="cent_two">
            <div class="second">
              <div class="three">
                <el-row>
                  <el-col :span="24"
                    ><div
                      class="grid-content bg-purple-dark"
                      style="font-weight: 700"
                    >
                      六、接班确认
                    </div></el-col
                  >
                </el-row>
                <div class="three_one">
                  <span style="padding-right: 5px">
                    接班人:
                    <input
                      v-model="infos.receiveOperator"
                      clearable
                      type="text"
                      placeholder=""
                      class="tiwen"
                      style="width: 140px"
                    />
                  </span>
                  <span style="padding-right: 5px; margin-left: 10px">
                    接班时间:
                    <el-date-picker
                      v-model="infos.handoverTime"
                      type="datetime"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                    />
                  </span>
                </div>
                <div class="three_one">
                  <span style="padding-right: 5px">
                    接班备注:
                    <input
                      v-model="infos.receiveDescription"
                      autocomplete="off"
                      spellcheck="false"
                      type="text"
                      placeholder=""
                      class="tiwen"
                      style="width: 540px"
                    />
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div style="text-align: center; margin-top: 1px">
            第{{ this.pageNums }}页
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="isShow = false">取 消</el-button>
          <el-button
            type="primary"
            @click="succession_btn(), (isShow = false)"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { jyxdPagePrint } from "@/utils/jyxd-page-printer.js";
import {
  handoverGetList,
  handoverConfirmHandover,
  handoverFallbackDraftBox,
  handoverConfirmSuccession,
  handoverPrintHandover,
  handoverEditConfirmHandover,
  handoverDeleteHandover,
  handoverEditHandover,
  getUser,
  usergetList,
  patientgetList,
  findPage, getUserListByUserTypegetNurseList,
} from "@/api/table";

export default {
  data() {
    return {
      printHandOverParam: {
        print_id: "print-handOver-div", //完整打印区域最外包裹, id名
        paper_height: "1240", //纸张长度，目前不自动分页，页面代码自行设计分页模式
        paper_width: "850", //纸张宽度，根据横向纵向调整，影响页面折行效果
        preview: "",
      },
      printDuringParam: {
        print_id: "print-during-div", //完整打印区域最外包裹, id名
        paper_height: "1240", //纸张长度，目前不自动分页，页面代码自行设计分页模式
        paper_width: "850", //纸张宽度，根据横向纵向调整，影响页面折行效果
        preview: "",
      },
      dataListarr: [],
      data: {},
      dialogVisible: false,
      isShow: false,
      garbage: false,
      draftShow: false,
      arrUserName: [],
      signOptions: [],
      pageNum: 1,
      pageNums: 1,
      dataList: [],
      ids: "",
      draftid: "",
      draftids: "",
      beginTime: "",
      beginTimes: [],
      info: {
        id: "",
        beginTime: "", //时间跨度
        endTime: "", //时间跨度
        infoDate: "", //日期
        infoTime: "", //时间
        handoverHour: "", //当班时间
        startHourTime: "", //当班开始时间
        endHourTime: "", //当班结束时间
        status: 1, //班别
        vitalsignsBeginTime: "", //特征时间
        vitalsignsEndTime: "", //特征时间
        bedName: "", //床号
        shift: "",
        visitCode: "",
        patientId: "", //病人id
        name: "", //姓名
        sex: "", //性别
        age: "", //年龄
        visitId: "", //住院号
        department: "", //来源科室
        visitTime: "", //入科时间
        operationTime: "", //出科科时间
        allergies: "", //过敏史
        diagnosisName: "", //诊断
        vitalSignTime: "", //生命体征时间
        temperature: "", //当前体征:体温
        pulse: "", //脉搏
        hr: "", //心率
        br: "", // 呼吸
        spo2: "", //SpO?
        ibp: "", //有创血压
        bp: "", //无创血压
        cvp: "", //CVP cmH2o
        cvpmmHg: "", //CVP mmHg
        maxtemperature: "", //最大体征:体温
        maxpulse: "", //脉搏2
        maxhr: "", //心率2
        maxbr: "", //呼吸2
        maxspo2: "", // SpO2?
        maxibp: "", //有创血压2
        maxbp: "", //无创血压2
        maxcvp: "", //CVP2 cmH2o
        maxcvpmmHg: "", //CVP2 mmHg
        mintemperature: "", //最小体征:体温
        minpulse: "", //脉搏3
        minhr: "", //心率3
        minbr: "", //呼吸3
        minspo2: "", //SpO3?
        minibp: "", //无创血压3
        minbp: "", //CVP3 cmH2o
        mincvp: "", //CVP3 mmHg
        mincvpmmHg: "", //CVP3 cmH2o
        intake: "", //入量
        output: "", //出量
        tracheaInsert: "", //气管插管
        tracheaCut: "", //气管切开
        ventilatorModel: "", //呼吸机型号
        breathePattern: "", //模式
        tubeDepth: "", //插管深度
        oxygenMethod: "", //吸氧方式
        oxygenFlow: "", //流量
        cvcSelect: "", //CVC选择
        pvcSelect: "", //pvc选择
        piccSelect: "", //picc选择
        portSelect: "", //port选择
        leftNeedleSelect: "", //留置针选择
        arterySelect: "", //动脉置管选择
        cvcDescription: "", //cvc值
        pvcDescription: "", //PVC值
        piccDescription: "", //PVC值
        portDescription: "", //PVC值
        leftNeedleDescription: "", //留置针
        artery: "", //动脉置管
        sendOperator: "", //交班人
        sendDescription: "", //交班描述
      },
      infos: {
        id: "",
        handoverTime: "",
        receiveOperator: "",
        receiveDescription: "",
      },
      dataArr: [
        {
          value: 0,
          label: "日班",
        },
        {
          value: 1,
          label: "晚班",
        },
        {
          value: 2,
          label: "夜班",
        },
      ],
      value1: "",
      value2: [],
      value3: [],
      value4: [],
      value5: [],
      value6: [],
      dingdong: [],
      patientId: "",
      sendOperatorList: "",
      receiveOperatorList: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.data = this.$store.state.user.severFall;
    patientgetList({ visitId: this.data.visit_id }).then((res) => {
      if (res.data[0].enter_time !== "") {
        this.info.visitTime = res.data[0].enter_time;
      }
      if (res.data[0].age !== "") {
        this.info.age = res.data[0].age;
      }
    });
    if (
      typeof this.data.patient_id == "string" &&
      this.data.patient_id.length > 0
    ) {
      this.info.diagnosisName = this.data.diagnosis_name;
      this.info.sourceDepartment = this.data.department_name;
      this.info.visitId = this.data.visit_id;
      this.info.visitCode = this.data.visit_code;
      this.patientId = this.data.patient_id;
      if (
        this.data.unplanned == "" ||
        this.data.unplanned == null ||
        this.data.unplanned == 0
      ) {
        this.garbage = true;
        alert("请在首页补全患者信息");
        // this.$message({
        //   message: "请在首页补全患者信息",
        //   type: "warning",
        //   duration: 1500,
        // });
        return;
      } else {
        this.garbage = false;
        this.initlist();
        this.findPageByPatientId();
      }
    } else {
      this.$message({
        message: "请先选择病人",
        type: "warning",
        duration: 1500,
      });
    }
  },
  computed: {
    getData() {
      return this.$store.state.user.severFall;
    },
  },
  watch: {
    getData: {
      handler(nVal) {
        this.data = this.$store.state.user.severFall;
        if (
          typeof this.data.patient_id == "string" &&
          this.data.patient_id.length > 0
        ) {
          this.info.diagnosisName = this.data.diagnosis_name;
          this.info.sourceDepartment = this.data.department_name;
          this.info.visitId = this.data.visit_id;
          this.info.visitCode = this.data.visit_code;
          this.patientId = this.data.patient_id;
          this.info.patientId = this.data.patient_id;
          this.info.visitId = this.data.visit_id;
          this.info.visitCode = this.data.visit_code;
          this.info.name = this.data.name;
          this.info.sex = this.data.sex;
          this.info.age = this.data.age;
          this.info.department = this.data.department_name;
          this.info.bedName = this.data.bed_code;
          this.info.operationTime = this.data.operation_time;
          this.info.allergies = this.data.allergies;
          this.info.diagnosisName = this.data.diagnosis_name;
          patientgetList({ visitId: this.data.visit_id }).then((res) => {
            if (res.data[0].enter_time !== "") {
              this.info.visitTime = res.data[0].enter_time;
            }
            if (res.data[0].age !== "") {
              this.info.age = res.data[0].age;
            }
          });
          if (
            this.data.unplanned == "" ||
            this.data.unplanned == null ||
            this.data.unplanned == 0
          ) {
            this.garbage = true;
            alert("请在首页补全患者信息");
            // this.$message({
            //   message: "请在首页补全患者信息",
            //   type: "warning",
            //   duration: 1500,
            // });
            return;
          } else {
            this.garbage = false;
            this.qifei();
            this.findPageByPatientId();
          }
        } else {
          this.$message({
            message: "请先选择病人",
            type: "warning",
            duration: 1500,
          });
        }
      },
      deep: true,
    },
  },
  methods: {
    signFilter(val) {
      this.value = val;
      if (val) { //val存在
        this.signOptions = this.arrUserName.filter((item) => {
          if (item.user_name.indexOf(val) >= 0 || item.login_name.indexOf(val) >= 0) {
            return true
          }
        })
      } else { //val为空时，还原数组
        Object.assign(this.signOptions, this.arrUserName);
      }
    },
    //设置页码
    findPageByPatientId() {
      findPage({
        patientId: this.data.patient_id,
      }).then((res) => {
        if (res.data != null && res.data.length > 0) {
          this.pageNums = res.data[0].pageNum;
          this.pageNum = res.data[0].pageNum;
        } else {
          this.pageNums = 1;
          this.pageNum = 1;
        }
      });
    },
    // 当用户输入内容开始远程搜索模糊查询的时候，会触发remoteMethod方法
    remoteMethod(query) {
      if (query !== "") {
        let callBackArr = [];
        this.selectLoading = true;
        usergetList({
          workNumber: query,
        }).then((res) => {
          this.selectLoading = false;
          this.arrName = res.data;
        });
      }
    },
    // 搜索
    btn() {
      this.initlist();
    },
    huli() {
      this.data = this.$store.state.user.severFall;
      (this.info.visitId = this.data.visit_id),
        (this.info.visitCode = this.data.visit_code),
        (this.info.patientId = this.data.patient_id);
    },
    //初始化页面
    initlist() {
      if (
        typeof this.data.patient_id == "string" &&
        this.data.patient_id.length > 0
      ) {
        this.info.patientId = this.data.patient_id;

        //获取签名列表
        getUserListByUserTypegetNurseList({
          deptCode: this.$store.state.user.loginInfo.deptCode
        }).then((res) => {
          this.arrUserName = res.data;
          Object.assign(this.signOptions, res.data);
        });

        handoverGetList({
          patientId: this.patientId,
          sendOperator: this.sendOperatorList,
          receiveOperator: this.receiveOperatorList,
          beginTime: this.value2[0] === undefined ? "" : this.value2[0],
          endTime: this.value2[1] === undefined ? "" : this.value2[1],
          handBeginTime: this.dingdong[0] === undefined ? "" : this.dingdong[0],
          handEndTime: this.dingdong[1] === undefined ? "" : this.dingdong[1],
          //status: 3,
        }).then((res) => {
          this.dataList = res.data;
        });
      } else {
        this.$message({
          message: "请先选择病人",
          type: "warning",
          duration: 1500,
        });
      }
    },
    qifei() {
      handoverGetList({
        patientId: this.patientId,
        sendOperator: this.sendOperatorList,
        receiveOperator: this.receiveOperatorList,
        beginTime: this.value2[0] === undefined ? "" : this.value2[0],
        endTime: this.value2[1] === undefined ? "" : this.value2[1],
        handBeginTime: this.dingdong[0] === undefined ? "" : this.dingdong[0],
        handEndTime: this.dingdong[1] === undefined ? "" : this.dingdong[1],
        //status: 3,
      }).then((res) => {
        this.dataList = res.data;
      });
    },

    //已回退至草稿箱
    yes(scope) {
      // 可以在这里执行删除数据的回调操作.......删除操作......
      console.log(scope.row.id);
      this.draftid = scope.row.id;
      handoverFallbackDraftBox({ id: this.draftid }).then((res) => {
        this.$message({
          message: "已回退至草稿箱",
          type: "success",
          duration: 1500,
        });
        this.btn();
      });
      scope._self.$refs[`popover-${scope.$index}`].doClose();
    },
    // 删除草稿箱数据
    yesdraft(scope) {
      // 可以在这里执行删除数据的回调操作.......删除操作......
      console.log(scope.row.id);
      const id = scope.row.id;
      handoverDeleteHandover({ id: id }).then((res) => {
        this.$message({
          message: "删除成功",
          type: "success",
          duration: 1500,
        });
        this.draft_btn();
      });
      scope._self.$refs[`popover-${scope.$index}`].doClose();
    },
    no(scope) {
      this.$message("取消删除");
      scope._self.$refs[`popover-${scope.$index}`].doClose();
    },
    //新增打开页面
    openAddBtn() {
      //清空数据，填充病人信息
      this.cleanDialogValue();
      if (
        typeof this.data.patient_id == "string" &&
        this.data.patient_id.length > 0
      ) {
        //填充病人信息和签名信息
        getUser().then((res) => {
          var date = new Date(); //年
          var year = date.getFullYear(); //月
          var month = date.getMonth() + 1; //日
          var day = date.getDate();
          this.info.infoDate = year + "-" + month + "-" + day;

          this.info.sendOperator = res.data.userName;
          this.info.receiveOperator = res.data.userName;
        });
        this.info.diagnosisName = this.data.diagnosis_name;
        this.info.sourceDepartment = this.data.department_name;
        this.info.visitId = this.data.visit_id;
        this.info.visitCode = this.data.visit_code;
        this.patientId = this.data.patient_id;
        this.info.patientId = this.data.patient_id;
        this.info.visitId = this.data.visit_id;
        this.info.visitCode = this.data.visit_code;
        this.info.name = this.data.name;
        this.info.sex = this.data.sex;
        this.info.age = this.data.age;
        this.info.department = this.data.department_name;
        this.info.bedName = this.data.bed_code;
        this.info.operationTime = this.data.operation_time;
        this.info.allergies = this.data.allergies;
        this.info.diagnosisName = this.data.diagnosis_name;
        this.dialogVisible = true;
        patientgetList({ visitId: this.data.visit_id }).then((res) => {
          if (res.data[0].enter_time !== "") {
            this.info.visitTime = res.data[0].enter_time;
          }
          if (res.data[0].age !== "") {
            this.info.age = res.data[0].age;
          }
        });
      } else {
        this.$message({
          message: "请先选择病人",
          type: "warning",
          duration: 1500,
        });
        this.dialogVisible = false;
      }
    },
    cleanDialogValue() {
      this.value3 = [];
      this.value4 = [];
      this.value5 = [];
      this.value6 = [];
      this.info = {
        id: "",
        beginTime: "", //时间跨度
        endTime: "", //时间跨度
        //handoverHour: "", //持续时间小时
        infoDate: "", //日期
        infoTime: "", //时间
        handoverHour: "", //当班时间
        startHourTime: "", //当班开始时间
        endHourTime: "", //当班结束时间
        status: 1,
        vitalsignsBeginTime: "", //特征时间
        vitalsignsEndTime: "", //特征时间
        bedName: "", //床号
        shift: "", //班别
        visitCode: "",
        patientId: "", //病人id
        name: "", //姓名
        sex: "", //性别
        age: "", //年龄
        visitId: "", //住院号
        department: "", //来源科室
        visitTime: "", //入科时间
        operationTime: "", //出科科时间
        allergies: "", //过敏史
        diagnosisName: "", //诊断
        vitalSignTime: "", //生命体征时间
        temperature: "", //当前体征:体温
        pulse: "", //脉搏
        hr: "", //心率
        br: "", // 呼吸
        spo2: "", //SpO?
        ibp: "", //有创血压
        bp: "", //无创血压
        cvp: "", //CVP cmH2o
        cvpmmHg: "", //CVP mmHg
        maxtemperature: "", //最大体征:体温
        maxpulse: "", //脉搏2
        maxhr: "", //心率2
        maxbr: "", //呼吸2
        maxspo2: "", // SpO2?
        maxibp: "", //有创血压2
        maxbp: "", //无创血压2
        maxcvp: "", //CVP2 cmH2o
        maxcvpmmHg: "", //CVP2 mmHg
        mintemperature: "", //最小体征:体温
        minpulse: "", //脉搏3
        minhr: "", //心率3
        minbr: "", //呼吸3
        minspo2: "", //SpO3?
        minibp: "", //无创血压3
        minbp: "", //CVP3 cmH2o
        mincvp: "", //CVP3 mmHg
        mincvpmmHg: "", //CVP3 cmH2o
        intake: "", //入量
        output: "", //出量
        tracheaInsert: "", //气管插管
        tracheaCut: "", //气管切开
        ventilatorModel: "", //呼吸机型号
        breathePattern: "", //模式
        tubeDepth: "", //插管深度
        oxygenMethod: "", //吸氧方式
        oxygenFlow: "", //流量
        cvcSelect: "", //CVC选择
        pvcSelect: "", //pvc选择
        piccSelect: "", //picc选择
        portSelect: "", //port选择
        leftNeedleSelect: "", //留置针选择
        arterySelect: "", //动脉置管选择
        cvcDescription: "", //cvc值
        pvcDescription: "", //PVC值
        piccDescription: "", //PVC值
        portDescription: "", //PVC值
        leftNeedleDescription: "", //留置针
        artery: "", //动脉置管
        sendOperator: "", //交班人
        sendDescription: "", //交班描述
      };
    },
    // 新增保存
    subBtn() {
      //this.info.beginTime = this.value3[0];
      //this.info.endTime = this.value3[1];
      //this.info.vitalsignsBeginTime=this.value4[0];
      //this.info.vitalsignsEndTime=this.value4[1];
      handoverConfirmHandover(this.info).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "交班信息新增成功",
            type: "success",
            duration: 1500,
          });
          this.cleanDialogValue();
          this.dialogVisible = false;
          this.btn();
        } else {
          this.$message({
            message: "交班信息新增失败！",
            type: "warning",
            duration: 1500,
          });
          this.dialogVisible = true;
        }
      });
    },
    // 草稿箱
    draftBtn() {
      if (
        typeof this.data.patient_id == "string" &&
        this.data.patient_id.length > 0
      ) {
        this.info.beginTime = this.value3[0];
        this.info.endTime = this.value3[1];
        this.info.vitalsignsBeginTime = this.value4[0];
        this.info.vitalsignsEndTime = this.value4[1];
        this.info.status = 0;
        handoverConfirmHandover(this.info).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "交班信息保存成功",
              type: "success",
              duration: 1500,
            });
            this.dialogVisible = false;
          } else {
            this.$message({
              message: "交班信息保存失败！",
              type: "warning",
              duration: 1500,
            });
            this.dialogVisible = true;
          }
        });
      } else {
        this.$message({
          message: "请先选择病人",
          type: "warning",
        });
      }
    },
    // 确认接班>>>反显
    succession(scope) {
      this.ids = scope.row.id;
      handoverPrintHandover({
        id: this.ids,
      }).then((res) => {
        //this.value5.push(res.data.beginTime);
        //this.value5.push(res.data.endTime);
        // this.value6.push(res.data.vitalsignsBeginTime);
        //this.value6.push(res.data.vitalsignsEndTime);
        //填充病人信息和签名信息
        this.info = res.data;
        getUser().then((res) => {
          this.infos.receiveOperator = res.data.userName;
        });
      });
    },
    // 确认接班按钮
    succession_btn() {
      this.infos.id = this.ids;
      handoverConfirmSuccession(this.infos).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "交班成功",
            type: "success",
            duration: 1500,
          });
          this.cleanDialogValue();
          this.isShow = false;
          this.btn();
        } else {
          this.$message({
            message: "交班失败",
            type: "warning",
            duration: 1500,
          });
          this.isShow = false;
        }
      });
    },
    // 一键生成交班
    generation() {
      jyxdPagePrint(this.printHandOverParam);
    },
    //一键生成接班
    generationDuring() {
      jyxdPagePrint(this.printDuringParam);
    },
    // 交班草稿箱
    draft_btn() {
      if (
        typeof this.data.patient_id == "string" &&
        this.data.patient_id.length > 0
      ) {
        this.draftShow = true;
        handoverGetList({
          patientId: this.patientId,
          sendOperator: this.sendOperatorList,
          receiveOperator: this.receiveOperatorList,
          beginTime: this.value2[0] === undefined ? "" : this.value2[0],
          endTime: this.value2[1] === undefined ? "" : this.value2[1],
          handBeginTime: this.dingdong[0] === undefined ? "" : this.dingdong[0],
          handEndTime: this.dingdong[1] === undefined ? "" : this.dingdong[1],
          status: 0,
        }).then((res) => {
          this.dataListarr = res.data;
        });
      } else {
        this.$message({
          message: "请先选择病人",
          type: "warning",
          duration: 1500,
        });
      }
    },
    // 确认草稿交班
    successiondraft(scope) {
      const id = scope.row.id;
      handoverEditConfirmHandover({
        id: id,
      }).then((res) => {
        this.qifei();
        if (res.code === 200) {
          this.$message({
            message: "交班成功",
            type: "success",
            duration: 1500,
          });
          this.draft_btn();
        } else {
          this.$message({
            message: "交班失败",
            type: "warning",
            duration: 1500,
          });
        }
      });
    },
    // 草稿箱编辑
    editdraft(scope) {
      this.draftids = scope.row.id;
      handoverPrintHandover({
        id: this.draftids,
      }).then((res) => {
        this.value3.push(res.data.beginTime);
        this.value3.push(res.data.endTime);
        this.value4.push(res.data.vitalsignsBeginTime);
        this.value4.push(res.data.vitalsignsEndTime);
        //填充病人信息和签名信息
        this.info = res.data;
      });
      this.dialogVisible = true;
    },
    // 编辑完保存
    subBtns() {
      this.info.id = this.draftids;
      this.info.beginTime = this.value3[0];
      this.info.endTime = this.value3[1];
      this.info.vitalsignsBeginTime = this.value4[0];
      this.info.vitalsignsEndTime = this.value4[1];
      handoverEditHandover(this.info).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "编辑成功",
            type: "success",
            duration: 1500,
          });
          this.btn();
        } else {
          this.$message({
            message: "编辑失败",
            type: "warning",
            duration: 1500,
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dialog {
  position: fixed;
  padding: 0 15px;
}
.adda {
  width: auto;
  height: 51px;
}
.cent {
  width: 100%;
  height: 800px;
  border: 1px solid #e8eaec;
}
.cent_two {
  width: 100%;
  height: 150px;
  border: 1px solid #e8eaec;
}
.cent-hand {
  border-bottom: 1px solid #e8eaec;
  padding: 5px 20px;
}
.headerOne {
  font-size: 20px;
  line-height: 36px;
  color: #17233d;
}
.headerRight {
  text-align: right;
}
.second {
  height: 80px;
  padding-top: 20px;
  padding-left: 15px;
  width: auto;
}
::v-deep.second .el-input__inner {
  border-radius: 0;
  border: 0;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none !important;
  border-bottom: 1px solid #d9d9d9;
  vertical-align: middle;
}
::v-deep.three_one .el-input__inner {
  border-radius: 0;
  border: 0;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none !important;
  border-bottom: 1px solid #d9d9d9;
  vertical-align: middle;
}
.three {
  height: auto;
  padding-left: 15px;
}
.three_one {
  padding-top: 10px;
}
.tiwen {
  width: 30px;
  border: 0px;
  border-bottom: 1px solid #dcdfe6;
  outline: none;
  text-align: center;
}
</style>
